﻿@page "/radios"

<h3>Radio 单选框</h3>

<h4>在一组备选项中进行单选</h4>

<Block Title="基础用法" Introduction="由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged"></RadioList>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用单选框" Introduction='通过 <code>IsDisabled="true"</code> 单选框不可用状态'>
    <RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false"></RadioList>
</Block>

<Block Title="Label 文字" Introduction="单选框显示文字">
                <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="按钮组"></RadioList>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 SelectedItem 类型数组">
        <div class="row g-3">
            <div class="col-12">
                <RadioList Items="@Items" @bind-Value="@BindRadioItem" OnSelectedChanged="@OnItemChanged"></RadioList>
            </div>
            <div class="col-12">
                <div>Text: @BindRadioItem.Text Value: @BindRadioItem.Value</div>
            </div>
        </div>
    <Logger @ref="BinderLog" />
</Block>

<Block Title="竖向排列" Introduction="通过设置 <code>IsVertical</code> 使组件内部竖向排列">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true"></RadioList>
</Block>

<Block Title="绑定枚举类型" Introduction="通过双向绑定 <code>Value</code> 无需设置 <code>Items</code>">
    <RadioList @bind-Value="@SelectedEnumItem"></RadioList>
</Block>

<Block Title="颜色" Introduction="通过设置 <code>Color</code> 属性改变组件背景色">
        <div class="row g-3">
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Primary"></RadioList>
            </div>
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Success"></RadioList>
            </div>
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Danger"></RadioList>
            </div>
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Info"></RadioList>
            </div>
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Warning"></RadioList>
            </div>
            <div class="col-12">
                <RadioList TValue="string" Items="@DemoValues" Color="@Color.Secondary"></RadioList>
            </div>
        </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
